<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LyricAudioPlayer Demo</title>
  <link rel="stylesheet" href="lyric-audio-player.css">
</head>
<body>
  <script src="LyricAudioPlayer.js"></script>
  <script>
    // 示例播放列表数据
    const demoPlaylist = {
      code: 200,
      data: [
        {
          n: 1,
          title: "Summer Vibes",
          singer: "Ocean Waves",
          cover: "https://example.com/cover1.jpg",
          song: "https://example.com/song1.mp3",
          lyrics: `
            [00:03.50]Feel the rhythm of the sea
            [00:07.20]Dancing waves are calling me
            [00:11.80]Golden sun and azure blue
            [00:16.50]This moment I share with you
          `
        },
        {
          n: 2,
          title: "Mountain High",
          singer: "Peak Climbers",
          cover: "https://example.com/cover2.jpg",
          song: "https://example.com/song2.mp3",
          lyrics: `
            [00:12.30]Reaching for the mountain peak
            [00:16.80]Where the eagles dare to speak
            [00:21.50]Thin air and the endless view
            [00:26.20]A world that's forever new
          `
        }
      ]
    };

    // 初始化播放器
    const player = new LyricAudioPlayer({
      mode: 'floating',
      theme: {
        variables: {
          '--primary-color': '#4ecdc4',
          '--secondary-color': '#f7fff7'
        },
        customClass: 'lap-theme-minimal'
      },
      cacheStrategy: {
        enabled: true,
        ttl: 7200
      }
    });

    // 加载播放列表
    player.loadPlaylist(demoPlaylist);

    // 事件监听示例
    player.container.addEventListener('lap:play', () => {
      console.log('Playback started');
    });

    player.container.addEventListener('lap:error', (e) => {
      console.error('Player error:', e.detail.error);
    });

    // 动态切换主题示例
    document.querySelector('#dark-mode').addEventListener('click', () => {
      player.setTheme({
        variables: {
          '--primary-color': '#3498db',
          '--secondary-color': '#2c3e50'
        },
        customClass: 'lap-theme-dark'
      });
    });
  </script>

  <!-- 示例控制按钮 -->
  <button id="dark-mode" style="position: fixed; top: 20px; right: 20px;">
    切换暗黑主题
  </button>
</body>
</html>